<template>
	<view >
		<view class="prize_info_box" v-if="loginStatus" v-show="showStaus">
				<view class="prize_img">
					<span class="prize_name">{{pageData.title}}</span>
					<view class="img">
						<img :src="pageData.image" />
					</view>
					<span class="prize_time">兑奖期限{{formattime(pageData.accept_start)}}至{{formattime(pageData.accept_expire)}}</span>
				</view>
				<view class="dec">
					<view class="dec_info">
						<span>兑奖时间</span>
						<span>{{formattime(pageData.accept_start)}}~{{formattime(pageData.accept_expire)}}</span>
					</view>
					<view class="dec_info" v-if="pageData.accept_addr!=''">
						<span>兑奖地址</span>
						<span>{{pageData.accept_addr}}</span>
					</view>
					<view class="dec_info" v-if="pageData.accept_desc!=''">
						<span>兑奖说明</span>
						<span>{{pageData.accept_desc}}</span>
					</view>
				</view>
				<view class="connect">
					<service style="margin: 0 24rpx 0 0;"></service>
				</view>
				<view class="btn_do">
					<span v-if="showMsg && needApp==1" class="msg">奖品仅支持在app端兑换</span>
					<span v-else></span>
					<span class="finish" v-if="data.status==3">未到期</span>
					<span class="finish" v-if="data.status==2">已过期</span>
					<span class="finish" v-if="data.status==1">已领取</span>
					<span class="exchange"  v-if="data.status==0" @click="openQrcode">立即领取</span>
				</view>
				
				
				<view class="qrcode" v-if="showQrcode">
					<span>请将二维码出示给工作人员</span>
					<img :src="qrcodeUrl" alt=""/>
					<span>即将核销&nbsp;{{pageData.title}}</span>
					<div class="hints">
						该二维码<br/>将于{{ formattime(qrTime) }}过期<br/>
						（过期后刷新页面即可获取新的兑奖码）
					</div>
				</view>
				<qrcode v-if="getQr" :text="link" @getLink="setLink"></qrcode>
				
			</view>
			<view class="login_box" v-else>
				<img :src="qiniuUrl+'prize_login.png'" />
				<span>还未登录哦</span><br/>
				<span>请先<span style="color: #4379A8;" @click="login">登录</span></span>
			</view>
			<modal v-if="platRule" :showType="8" :data="serviceData"  @close="platRule=false"></modal>
			<guide @close = "close"></guide>
	</view>
</template>

<script>
	import {prizeInfo,verifier,virtualVerifier,appLogin} from '@/api/api.js'
	import {isQianfan,checkImage,checkLogin,LoginApp} from '@/until/QFH5.js' 
	import {mapGetters} from 'vuex'
	import {formatTime} from '@/until/tool.js'
	import qrcode from '@/components/yz-qr/yz-qr.vue'
	export default{
		components:{qrcode},
		computed:{
			win_icons(){
				switch(this.pageData.type){
					case 1: return this.qiniuUrl+'prize.png'
					case 2: return this.qiniuUrl+'bag.png'
					case 3: return this.qiniuUrl+'prize_mt.png'
				}
			},
			showMsg(){
				if(isQianfan())return false
				else return true
			},
			...mapGetters({qiniuUrl:'qiniuUrl',loginInfo:'loginInfo',guide:'guide'})
		},
		data(){
			return{
				decData:[{ title:"", content:'' },{ title:"", content:'' },{ title:"", content:'' }],
				prizeId:0,
				pageData:{},//獎品數據
				data:{status:3},//所有數據
				serviceData:{},//客服信息
			
				showQrcode:false,//展示二维码页面
				link:'',//加密字符
				getQr:false,//获取二维码
				qrTime:'',
				qrcodeUrl:'',//获得的二维码
				platRule:false,//平台检验
				loginStatus:true,//登录状态
				
				actid:null,//活动id
				showStaus:false,//优化加载 v-clock
				//openBagStatus:false,//防抖
				needApp:1
			}
		},
		methods:{
			formattime(val){
				return formatTime(val,"YYYY-MM-DD HH:MM")
			},
			openCall(){
				window.location.href="tel:"+this.serviceData.service_phone
			},
			close(){
				// this.openBagStatus = false
			},
			async openQrcode(){
				// if(!isQianfan()){
				// 	console.log(3)
				// 	this.platRule = true
				// 	return
				// }
				
				if(!isQianfan()){
					let {need_app,type} = this.data.prize
					if(need_app==1){
						this.platRule = true
						return
					}
					if(need_app==0  && type!=1){
						this.platRule = true
						return
					}
				}
					
				console.log(2)
				if(isQianfan()&& this.guide.phone==""){
						this.$store.dispatch('setGuideShow',2)
						if(this.guaStatus){
							this.resetGua()
							this.guaStatus = false
						}
						return
				}
				let res = await verifier({rid:this.prizeId},'redpkg')
				if(res.code!=0 && res.code!=7){
					uni.showToast({ title:'红包error:code:'+res.code+' ;data:'+JSON.stringify(JSON.stringify(res)), icon:'none' ,duration:5000})
					// this.openBagStatus = false
					return
				}
				//1实物 2app红包 3外卖红包
				let type = this.pageData.type
				let _this = this
				if(type==1){
					uni.showLoading({ title:'请稍等' })
					// this.openBagStatus = false
					if(res.code==0){
						this.link = res.data.apply_url
						this.qrTime = res.time + 172800
						this.getQr = true
					}else{
						uni.hideLoading()
					}
				}else if(type == 2){
						// alert('即将拉起红包，塞入参数为：'+JSON.stringify(res.data.envelope.envelope))
						if(res.code==7){
							uni.showModal({
								title:'提示',
								content:'活动未发布，此奖品不可领取！' ,
								showCancel: false,
								confirmText:'知道了',
								success: function (res) { 
									// _this.openBagStatus = false
								}
							})
							
							return
						}
						if(!res.data.envelope.envelope){
							uni.showToast({ title:'红包异常，请联系管理员！', icon:'none' ,duration:5000})
							// _this.openBagStatus = false
							return
						}
						let obj =res.data.envelope.envelope;
						QFH5.openPacket(JSON.stringify(obj),function(state,data){
							//state 0:没有中奖 1：显示中奖金额（已拆） 2：待领取 3：已过期
							console.log(state,data)
							// alert('拆开状态：'+state+'，红包回传数据：'+JSON.stringify(data))
							if(state==1){
								//拆开了
								_this.getVirtualUrl()
							}
							// _this.openBagStatus = false
						})
				}else if(type == 3){
					let data  = res.data.tbk.wechat
					if(isQianfan()){
						QFH5.jumpMiniProgram(data.gid, data.page,(state, data)=>{
							//跳转错误
							if (state === 2) {
								// _this.this.openBagStatus = false
								uni.showToast({
									title:data.error
								})
							}
							// _this.openBagStatus = false
						})
					}else if(res.data.tbk.h5!=''){
						window.location.href = res.data.tbk.h5
					}
				}else if(type==4){
					let url  = res.data.ext_link
					window.location.href = url
				}
			},
			setLink(val){
				this.qrcodeUrl = val
				this.showQrcode = true
				this.getQr = false
				uni.hideLoading()
			},
			getVirtualUrl(){
				virtualVerifier({rid:this.prizeId},'redpkg').then(res=>{
					if(res.code==0){
						this.$set(this.data,'status',1)
					}
				})
			},
			login(){
				LoginApp()
			},
			//检查绑定微信状态
			async init(){
				let loginStatus = await checkLogin()
				this.loginStatus = loginStatus
				console.log('当前登录状态',loginStatus)
				if(!loginStatus){
					LoginApp()
					return
				}
				console.log('init',this.guide.isWechat)
				if(isQianfan() && !this.guide.isWechat){
					this.$store.dispatch('setGuideShow',1)
					return 	
				}
				prizeInfo({rid:this.prizeId},'redpkg').then(res=>{
					if(res.code==0){
						this.pageData = res.data.prize
						this.pageData.image = checkImage(this.pageData.type,this.pageData.image)
						this.data = res.data
						this.$store.dispatch('serviceInfo',res.data.service)
						let data = res.data
						this.needApp = res.data.prize.need_app
						uni.setStorageSync('prize',JSON.stringify(res.data))

						this.decData[0].content = data.win_start +'-'+data.win_expire
						this.decData[1].content = data.accept_addr||'-'
						this.decData[2].content = data.accept_desc||'-'
					}else if(res.code==401){
						this.loginStatus = false
					}
					this.$nextTick(()=>{
						this.showStaus = true
					})
				})
			}
		},
		mounted() {
			this.$setTitle('奖品详情')
			this.init()
			// this.isWeixin = isWeiXin()
			
		},
	    onShow() {
			
		},
		onLoad(op){
			this.prizeId = op.pid
			this.actid = op.id || uni.getStorageSync('actid') || 0
			if(op.actid){
				uni.setStorageSync('actid',op.actid)
			}
			// alert(JSON.stringify(op))
		}
	}
</script>

<style lang="scss" scoped>
	.hints{
		margin-top: 64rpx;
		text-align: center;
		font-size: 34rpx;
		line-height: 44rpx;
		color: #FF3255;
	}
	.disable {
		pointer-events: none;
	}
	.prize_info_box{
		width: 750rpx;
		overflow: hidden;
		min-height: 100vh;
		background-color: #F2F2F2 ;
		.prize_img{
			padding: 39rpx 0 41rpx;
			background-color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			&>span{
				display: block;
			}
			.prize_name{
				height: 48rpx;
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
			}
			.prize_time{
				font-size: 26rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
			}
			.img{
				margin: 20rpx 0;
				line-height: 0;
				img{
					width: 200rpx;
					height: 200rpx;
					background-color: rgba(255,255,255,0.1);
					font-size: 0;
				}
			}
		}
		
		// &>view{
		// 	padding: 30rpx;
		// }
		.title{
			width: 750px;
			height: 140rpx;
			line-height: 140rpx;
			font-size: 34rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
			padding-left: 30rpx;
			background-color: #fff;
			// margin-top: -14rpx;
		}
		.dec{
			margin-top: 20rpx;
			padding:20rpx  28rpx 30rpx;
			background-color: #fff;
			width: 696rpx;
			&>span{
				font-size: 34rpx;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: bold;
				color: #222222;
				display: block;
				margin-bottom: 6rpx;
			}
			.dec_info{
				// margin-bottom: 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				span{
					display: block;
					font-size: 30rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: bold;
					color: #222222;
					// border:1rpx solid red;
					line-height: 42rpx;
				}
				span:nth-child(2){
					font-size: 26rpx;
					font-family: PingFang SC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					line-height: 54rpx;
					margin:1rpx 0 17rpx;
				}
			}
			.dec_info:last-child{
				span:nth-child(2){
					margin:1rpx 0 0rpx;
					white-space: pre-line;
				}
			}
		}
		.connect{
			width: 750rpx;
			// padding:24rpx 0;
			margin-top: 20rpx;
			background-color: #fff;
			// padding:24rpx 29rpx 24rpx 30rpx;
			// background-color: #fff;
			// margin-top: 20rpx;
			// &>span{
			// 	font-size: 34rpx;
			// 	font-family: PingFang SC-Bold, PingFang SC;
			// 	font-weight: bold;
			// 	color: #222222;
			// 	display: block;
			// 	margin-bottom: 6rpx;
			// }
			// .dec_info{
			// 	display: flex;
			// 	justify-content: flex-start;
			// 	position: relative;
			// 	width: 720rpx;
			// 	span{
			// 		display: block;
			// 		font-size: 30rpx;
			// 		font-family: PingFang SC-Regular, PingFang SC;
			// 		font-weight: 400;
			// 		color: #222222;
			// 		min-width: 120rpx;
			// 		line-height: 62rpx;
			// 		// margin-top: -6rpx;
			// 	}
			// 	span:nth-child(2){
			// 		margin-left: 30rpx;
			// 		font-size: 26rpx;
			// 		font-family: PingFang SC-Regular, PingFang SC;
			// 		font-weight: 400;
			// 		color: #666666;
			// 		// line-height: 26rpx;
			// 	}
			// 	.btn{
			// 		display: flex;
			// 		justify-content: flex-start;
			// 		align-items: center;
			// 		width: 103rpx;
			// 		height: 30rpx;
			// 		background: #FFFFFF;
			// 		border-radius: 24rpx;
			// 		border: 1rpx solid #BEBEBE;
			// 		padding: 9rpx 0 9rpx 17rpx;
			// 		position: absolute;
			// 		top: 0rpx;
			// 		right: 29rpx;
			// 		img{
			// 			width: 32rpx;
			// 			height: 30rpx;
			// 		}
			// 		&>span{
			// 			padding: 0;
			// 			margin: 0;
			// 			margin-left: 5rpx;
			// 			display: block;
			// 			font-size: 26rpx;
			// 			font-family: PingFang SC-Regular, PingFang SC;
			// 			font-weight: 400;
			// 			color: #666666;
			// 		}
			// 	}
			// }
		}
		.btn_do{
			background: #FFFFFF;
			margin-top: 24rpx;
			padding: 29rpx 145rpx 29rpx;
			text-align: center;
			span:not(:first-child){
				display: block;
				width: 460rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				font-family: PingFang SC-Bold, PingFang SC;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFFFF;
				border-radius: 43px;
				// margin
			}
			.msg{
				display: block;
				font-size: 20rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #666666;
				line-height: 28rpx;
				width: auto;
				height: 28rpx;
				margin-bottom: 10rpx;
			}
			.finish{
				background: #E6E6E6;
				letter-spacing: 2rpx;
			}
			.exchange{
				background: #FF3255;
				letter-spacing: 2rpx;
				&:active{
					opacity: 0.9;
				}
			}
		}
	}
	
	.qrcode{
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100vh;
		background-color: #fff;
		
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
		span{
			&:first-child{
				margin-top: 182rpx;
			}
			font-size: 30rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #222222;
			line-height: 26px;
			&:nth-child(2){
				font-weight: 400;
				color: #666666;
			}
		}
		img{
			width: 250rpx;
			height: 250rpx;
			margin: 31rpx 0 19rpx;
		}
	}
	.login_box{
		width: 750rpx;
		height: 100vh;
		text-align: center;
		img{
			width: 480rpx;
			height: 320rpx;
			margin: 175rpx 135rpx 0;
		}
		.text{
			margin-top: 30rpx;
			text-align: center;
			font-size: 30rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			letter-spacing: 1rpx;
		}
	}
</style>
